<template>
	<view>
		<swiper class="swiper" circular autoplay>
			<swiper-item @click="goView(i)" v-for="i in bannerList" :key='i.id'>
				<image class="bg" :src="i.imagePath+'?x-oss-process=image/resize,m_fill,h_240,w_375'" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="box padding-xl shadow-warp bg-white" style="box-shadow: 0px 0px 5px 8rpx rgba(0,0,0,.1);">
			<scroll-view scroll-x class="bg-white nav text-center">
				<view class="cu-item" style="font-size: 38rpx;" :class="index==type?'text-yellow cur':''" v-for="(item,index) in typeArr" :key="index" @tap="tabSelect" :data-id="index">
					{{typeArr[index]}}
				</view>
			</scroll-view>
			<view  @click="goArea" class="area margin-top padding">
				<text>{{chooseCity.areaName}}</text>
				<text class="iconfont icon-dizhi"></text>
			</view>
			<view class="time margin-top radius padding">
				<view>
					<view class="text-gray margin-bottom">入住时间</view>
					<view v-if="!type" @tap='show=true'>{{time[0]+'至'+time[1]}}</view>
					<view v-else>{{time[0]}}</view>
				</view>
				<view v-if="!type">
					<view class="text-gray margin-bottom">入住天数</view>
					<view style="text-align: right;">{{dayNum}}</view>
				</view>
			</view>
			<view class="search margin-top radius">
				<text class="cuIcon-search"></text>
				<input type="text" v-model="search" placeholder="搜索酒店关键字" />
			</view>
			<button @tap='searchHotel' style="width: 100%;" class="cu-btn bg-yellow margin-top round lg" type="">搜索预订酒店</button>
		</view>
		<view v-if="modalName=='Image'" :class="{'animation-scale-down':modalName1=='hide'}" class="animation-reverse" style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.8);z-index: 1000;">
			<image @click='imageHide("modalName1")' src="https://hotelfiles.oss-cn-zhangjiakou.aliyuncs.com/miniapp/static/yaoqing.png?x-oss-process=image/resize,m_lfit,w_375" style="width: 100vw;height: 100vh;"></image>
		</view>
		<view v-if="modalName=='lotteryCount'" :class="{'animation-scale-down':modalName2=='hide'}" class="animation-reverse" style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.8);z-index: 1000;">
			<view class="lotteryCount">
				<image mode="widthFix" src="https://hotelfiles.oss-cn-zhangjiakou.aliyuncs.com/miniapp/static/choujiang.png?x-oss-process=image/resize,m_fill,h_240,w_240"></image>
				<u-button type="primary" @click='goLotteryCount'>立即前往</u-button>
				<u-button style="position: relative;top: 20rpx;" @click='imageHide("modalName2")'>立马消失</u-button>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='guanzhu'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green"></view>
					<view class="action text-blue" @tap="modalName=null">取消</view>
				</view>
				<view style="text-align: left;">
					<official-account @load='officialAccountLoad'
						@error='officialAccountError'></official-account>
				</view>
			</view>
		</view>
		<u-calendar 
		start-text='住店'  
		end-text='离店'
		btn-type='warning'
		active-bg-color='#ff9900'
		range-bg-color='#fdf6ec'
		range-color='#ff9900'
		v-model="show" 
		:mode="type?'date':'range'"
		:min-date='minDate'
		max-date="3000-12-31"
		@change='changeTime'>
			<view slot="tooltip">
				<view class="text-center margin-top">
					请选择住店/离店时间
				</view>
			</view>
		</u-calendar>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import index from './index.js'
	export default index
</script>

<style lang="scss" scoped>
	@import "@/colorui/animation.css";
.swiper{
	width: 100vw;
	height: 480rpx;
	image{
		width: 100%;
	}
}
.lotteryCount{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.box{
	margin: -100rpx 50rpx 0 50rpx;
	border-radius: 20rpx;
	.search{
		display: flex;
		height: 100rpx;
		border: 1rpx solid #dedede;
		line-height: 100rpx;
		text{
			font-size: 30rpx;
			margin: 0 20rpx;
		}
		input{
			height: 100rpx;
		}
	}
	.time{
		display: flex;
		justify-content: space-between;
		border: 1rpx solid #dedede;
	}
	.area{
		height: 100rpx;
		border: 1rpx solid #dedede;
		display: flex;
		justify-content: space-between;
	}
}
</style>
